<template>
	<uni-popup
		ref="popup" type="center"
		@close="$emit('close')"
	>
		<view class="con-wrap"  @click.stop>
			<scroll-view class="con" scroll-y="true">
				<view class="info">
					<image
						lazy-load mode="aspectFill"
						class="img"  :src="item.mainImage"
					></image>
					<text class="name">{{ item.description }}</text>
				</view>
				<view class="cate-wrap">
					<text class="title">规格</text>
					<view class="cate-item-wrap">
						<button
							v-for="(v, i) in item.skuInfoVoList" :key="i"
							:type="v.id === selectSkuId ? 'primary' : 'default'"
							class="cate-item btn" size="mini"
							@click="selectSkuId = v.id"
						>
							{{ v.skuName }}
						</button>
					</view>
				</view>
				<view v-for="(v, i) in item.spuInfoVoList" :key="i" class="cate-wrap">
					<text class="title">{{ v.spuType }}</text>
					<view class="cate-item-wrap">
						<button
							v-for="(v, j) in v.spuInfoVoList" :key="j"
							:type="selectCateId[i] === v.id ? 'primary' : 'default'"
							class="cate-item btn" size="mini"
							@click="updateCate(i, v.id)"
						>
							{{ v.spuName }}
						</button>
					</view>
				</view>
				<button
					@click="submit()"
					class="submit btn"
					type="primary"
				>
					提交
				</button>
			</scroll-view>
			<uni-icons
				@click="$emit('close')"
				class="close"
				color="#999"
				type="closeempty" size="17"
			></uni-icons>
		</view>
	</uni-popup>
</template>

<script>
import http from '@/utils/http';

export default {
	props: {
		showSelect: {
			type: Boolean,
			default () {
				return false
			}
		},
		item: {
			type: Object,
			default () {
				return {}
			}
		},
	},
	watch: {
		showSelect: {
			handler(val, oldval) {
				if (val) {
					this.$refs.popup.open();
				}
				else {
					this.$refs.popup.close()
				}
			}
		},
		item: {
			handler(val) {
				this.init(val);
			},
			deep: true
		}
	},
	data() {
		return {
			// 当前选择的sku
			selectSkuId: '',
			// 当前选择的类目
			selectCateId: [],
		}
	},
	created() {
		this.init(this.item);
	},
	mounted() {
		// this.$refs.popup.open();
	},
	methods: {
		init(val) {
			this.selectSkuId = val.skuInfoVoList[0].id;
			this.selectCateId = val.spuInfoVoList.map(v => v.spuInfoVoList[0].id);
		},
		updateCate: function(i, val) {
			console.log(val, '12312')
			this.selectCateId = this.selectCateId.map((v, i1) => (i1 === i ? String(val) : v));
			console.log(this.selectCateId, '789')
			// this.$forceUpdate();
		},
		/**
		 * 下单
		 */
		submit() {
			console.log( {
				count: 1,
				productId: this.item.id,
				productSkuId: this.selectSkuId,
				spuIds: this.selectCateId.join(",")
			}, '2131');
			http.post('/cart/addCart', {
				count: 1,
				productId: this.item.id,
				productSkuId: this.selectSkuId,
				spuIds: this.selectCateId.join(",")
			}).then(res => {
				uni.showToast({
					title: '下单成功',
					icon: 'success'
				})
				this.$emit('close');

			}).catch(e => {
				console.log(e)
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
.con-wrap
	position relative
	overflow visiable
.con
	background #fff
	padding 40rpx
	border-radius 8rpx
	width 500rpx
	max-height 80vh

	.info
		display flex
		align-items center
		margin-bottom 32rpx

		.img
			width 160rpx
			height 160rpx
			background-size cover

		.name
			margin-left 20rpx
			font-size 28rpx
			flex 1 0 0

	.cate-wrap
		font-size 50rpx
		margin-bottom 32rpx

		.cate-item
			margin-right 20rpx
			height 60rpx
			line-height 60rpx
			font-size 28rpx

	.submit
		height 80rpx
		line-height 80rpx
		font-size 32rpx

.close
	background #fff
	position absolute
	z-index 10
	bottom -60rpx
	left 50%
	height 50rpx
	width 50rpx
	display flex
	justify-content center
	align-items center
	border-radius 25rpx
	font-weight 400
	color #999
	text-align center
	margin-left -25rpx


</style>
